<!-- src/views/teacher/FinanceView.vue -->
<template>
    <div class="finance-container">
      <a-card title="财务总览" :bordered="false" class="finance-card">
        <template #extra>
          <a-button type="link" @click="refreshData">
            <sync-outlined :spin="loading"/>
          </a-button>
        </template>
  
        <a-skeleton active :loading="loading">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-statistic
                title="累计收入"
                :value="totalIncome"
                :precision="2"
                class="money-statistic"
              >
                <template #prefix>
                  <span class="currency">¥</span>
                </template>
                <template #suffix>
                  <span class="unit">元</span>
                </template>
              </a-statistic>
            </a-col>
            
            <a-col :span="24" style="margin-top: 40px">
              <div class="tip-box">
                <info-circle-filled class="tip-icon"/>
                <span class="tip-text">收入统计包含所有已完成课程的订单金额</span>
              </div>
            </a-col>
          </a-row>
        </a-skeleton>
      </a-card>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { SyncOutlined, InfoCircleFilled } from '@ant-design/icons-vue';
  import { useUserStore } from '/@/store';
  
  
  interface FinanceData {
    totalIncome: number;
  }
  
  const userStore = useUserStore();
  const loading = ref(true);
  const totalIncome = ref(0);
  
  const fetchData = async () => {
  try {
    loading.value = true;
    const userId = userStore.user_id; // 获取用户ID
    
    const res = await fetch(`http://localhost:8080/api/teacher/finance/total-income?userId=${userId}`);
    
    if (!res.ok) throw new Error('请求失败');
    
    const data = await res.json();
    totalIncome.value = data;
  } catch (error) {
    message.error('获取数据失败');
  } finally {
    loading.value = false;
  }
};
  
  const refreshData = () => {
    fetchData();
  };
  
  onMounted(() => {
    fetchData();
  });
  </script>
  
  <style scoped lang="less">
  .finance-container {
    padding: 20px;
    background: #fff;
    min-height: calc(100vh - 96px);
    
    .finance-card {
      border-radius: 12px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      
      :deep(.ant-card-head) {
        border-bottom: none;
        padding: 0 24px;
        
        .ant-card-head-title {
          font-size: 18px;
          font-weight: 600;
          color: #2c3e50;
        }
      }
      
      :deep(.ant-card-body) {
        padding: 24px;
      }
    }
  
    .money-statistic {
      text-align: center;
      
      :deep(.ant-statistic-title) {
        font-size: 16px;
        color: #7f8c8d;
        margin-bottom: 8px;
      }
      
      :deep(.ant-statistic-content) {
        font-size: 36px;
        color: #2ecc71;
        font-weight: 600;
        
        .currency {
          position: relative;
          top: -2px;
          margin-right: 4px;
        }
        
        .unit {
          font-size: 16px;
          color: #95a5a6;
          margin-left: 4px;
        }
      }
    }
  
    .tip-box {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .tip-icon {
        color: #3498db;
        margin-right: 8px;
      }
      
      .tip-text {
        color: #7f8c8d;
        font-size: 14px;
      }
    }
  }
  </style>